<template>
  <div class="container">
    <!-- 这是注释 -->
    <h2>{{ str }}</h2>
    <!-- <input type="text" :value="str" @input="str = $event.target.value"> -->
    <!-- <input type="text" v-model="str"> -->

    <!-- v-model.修饰符="xxx" -->
    <!-- v-model.lazy="xx"     ----  会在输入框失去焦点后，才会更新数据 -->
    <!-- v-model.number="xx"   ----  会自动转换为数字 -->
    <!-- v-model.trim="xx"     ----  会把数据两边的空白去掉 -->

    <input type="text" v-model.lazy="str"> <br/>
    <input type="text" v-model.number="age"> <br/>
    <input type="text" v-model.trim="uname"> <br/>
  </div>
</template>

<script>
export default {
  // 这里放vue相关代码
  data () {
    return {
      str: '你好世界',
      age: 20,
      uname: 'zs'
    }
  }
}
</script>

<style>
h2 {
  color: red;
}
</style>